<!DOCTYPE html><html><head><title>03-第三章 样式初始化 标签类型及转换</title><meta charset='utf-8'><link href='https://dn-maxiang.qbox.me/res-min/themes/marxico.css' rel='stylesheet'><style>
.note-content  {font-family: 'Helvetica Neue', Arial, 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei', 'WenQuanYi Micro Hei', SimSun, Song, sans-serif;}

</style></head><body><div id='preview-contents' class='note-content'>
                        
                    



<h1 id="03-第三章-样式初始化-标签类型及转换">03-第三章 样式初始化 标签类型及转换</h1>

<p></p>

<hr>



<h2 id="一标签样式初始化">一、标签样式初始化</h2>



<pre class="prettyprint with-line-number hljs-dark"><code class="hljs stylus"><div class="hljs-line"><span class="hljs-comment line-number">1.</span><span class="hljs-selector-tag">body</span>,<span class="hljs-selector-tag">dl</span>,<span class="hljs-selector-tag">dd</span>,<span class="hljs-selector-tag">p</span>,<span class="hljs-selector-tag">h1</span>,<span class="hljs-selector-tag">h2</span>,<span class="hljs-selector-tag">h3</span>,<span class="hljs-selector-tag">h4</span>,<span class="hljs-selector-tag">h5</span>,h6{<span class="hljs-attribute">margin</span>:<span class="hljs-number">0</span>;}
</div><div class="hljs-line"><span class="hljs-comment line-number">2.</span><span class="hljs-selector-tag">ol</span>,ul{<span class="hljs-attribute">margin</span>:<span class="hljs-number">0</span>;<span class="hljs-attribute">padding</span>:<span class="hljs-number">0</span>;<span class="hljs-attribute">list-style</span>:none;}
</div><div class="hljs-line"><span class="hljs-comment line-number">3.</span>a{<span class="hljs-attribute">text-decoration</span>:none;}
</div><div class="hljs-line"><span class="hljs-comment line-number">4.</span>img{<span class="hljs-attribute">border</span>:none;}
</div></code></pre>

<p>css reset 原则：但凡是浏览默认的样式，都不要使用。</p>

<hr>



<h2 id="二标签的两大阵营">二、标签的两大阵营</h2>

<blockquote>
  <p>块级标签：div ul li dl———————–<code>display:block</code> (能设置宽高) <br>
  内联(行内)标签：span a em————-<code>display:inline</code>(不能设置宽高)</p>
</blockquote>

<hr>



<h2 id="三-块级标签特征">三、 块级标签特征</h2>

<p>默认display：block  </p>

<blockquote>
  <p>1、没有宽度时，默认宽度100%、 <br>
  2、支持宽高 <br>
  3、独占一行 （列展示）——贪婪、霸道 <br>
  4、支持所有css命令</p>
</blockquote>

<hr>



<h2 id="四-内联标签特征">四、 内联标签特征</h2>

<p>默认display：block </p>

<blockquote>
  <p>1、 默认内容撑开宽高 <br>
  2、不支持宽高  <br>
  3、 可以继续跟同类标签（横排展示）——友好  <br>
  4、 不支持上下的margin <br>
  5、上下padding只对自身有效（诡异）     </p>
</blockquote>

<p>问题：</p>

<blockquote>
  <p>F、不支持margin:<code>auto</code>; <br>
  G、空格 回车 被解析</p>
</blockquote>

<hr>



<h2 id="五-标签类型转换">五、 标签类型转换</h2>

<blockquote>
  <p><code>display：block</code>    显示为块           能使内联元素具备块元素的特性 <br>
   <code>display：inline</code>   显示为内联   能使块级元素具备内联元素的特性</p>
</blockquote>

<hr>



<h2 id="六行内块级标签特征">六、行内块级标签特征</h2>

<p>行内块级标签 默认<code>display：inline-block</code> —-如：<code>&lt;img/&gt;</code></p>

<blockquote>
  <p>1、块级可以（横排展示）   ——友好 <br>
  2、行内标签支持宽高 <br>
  3、没有宽度的时候内容撑开宽度 <br>
  4、支持margin</p>
</blockquote>

<p>问题：</p>

<blockquote>
  <p>1、标签间空格 被解析 <br>
  2、不支持margin:auto; <br>
  3、ie6 ie7 不支持块属性标签的inline-block;</p>
</blockquote>

<hr>



<h2 id="七总结">七、总结</h2>



<p><img longdesc="./1515157126763.png" alt="Alt text" title="" type="image/png" class="" src=""></p>



<h2 id="八text-align-文本水平对齐方式">八、text-align 文本水平对齐方式</h2>

<p>text-align ：</p>

<blockquote>
  <p><code>left</code>   -左对齐(默认) <br>
      <code>right</code>   -右对齐 <br>
      <code>center</code> -居中对齐</p>
</blockquote></div></body></html>